<template>
  <div class="wrap">
    <div class="box">
      <h3 class="h3">新建车票</h3>
      <div class="box-r">
        <el-button @click="goback">返回</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </div>
    <div class="mes">
      <h3 class="bac">基本信息</h3>
      <div class="mes1">
        <p>
          车次类型
          <el-select
            v-model="value"
            class="m-2"
            placeholder="请选择"
            @change="changeItem"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </p>
        <p>
          车次
          <el-select
            v-model="value1"
            class="m-2"
            placeholder="请选择"
            @change="changeItem1"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </p>
        <p>
          出发日期
          <el-date-picker
            @change="changeDate"
            v-model="value2"
            type="date"
            placeholder="Pick a day"
            :size="size"
          />
        </p>
      </div>
      <div class="mes2">
        <p>
          出发/到达站
          <el-select
            @change="changeStart"
            v-model="value3"
            class="m-2"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            /> </el-select
          >至
          <el-select
            v-model="value4"
            class="m-2"
            placeholder="请选择"
            @change="changeEnd"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </p>
        <p>
          出发/到达时间
          <el-time-select
          @change="changeStartTime"
            v-model="value5"
            start="08:30"
            step="00:15"
            end="18:30"
            placeholder="Select time"
          />
          至
          <el-time-select
          @change="changeEndTime"
            v-model="value6"
            start="08:30"
            step="00:15"
            end="18:30"
            placeholder="Select time"
          />
        </p>
      </div>

      <div class="mes3">
        <span>席位总数:567</span>
        <span>车厢总数:8</span>
        <span>限乘人数:678</span>
        <span>无座总数:56</span>
        <span>席位总数:56</span>
        <span>无座总数:45</span>
      </div>

      <!-- 表格 -->
      <div class="tab">
        <el-table :data="store.$state.ticketList" style="width: 100%">
          <el-table-column label="席位类别" width="200">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon><timer /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.type }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="车箱数" width="200">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-input-number
                  v-model="num1"
                  :min="1"
                  :max="10"
                  @change="handleChange"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="每车排数" width="200">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-input-number
                  v-model="num2"
                  :min="1"
                  :max="10"
                  @change="handleChange"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="每车席位" width="200">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon><timer /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.num }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="票价" width="200">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon><timer /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.price }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 车票详情 -->
      <div class="detail">
        <h3>生成车票详情</h3>
        <el-table :data="store.$state.ticketDetail" style="width: 100%">
          <el-table-column label="ID" width="165">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                 <p>{{ scope.row.id }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="出发日期" width="165">
            <template #default="scope">
              <div style="display: flex; align-items: center" >
               {{ scope.row.startDate }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="车次/类型" width="165">
            <template #default="scope">
              <div style="display: flex; align-items: center" class="bb">
                <p class="p">{{ scope.row.car }}</p>
                <p>{{ scope.row.type }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="出发/到达站" width="165">
            <template #default="scope">
              <div style="display: flex; align-items: center" class="bb">
                <p ><el-tag>始</el-tag>{{ scope.row.startLocation }}</p>
                <p><el-tag type="success">终</el-tag>{{ scope.row.endLocation }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="出发/到达时间" width="165" >
            <template #default="scope">
              <div style="display: flex; align-items: center" class="bb">
                <p>{{ scope.row.startTime }}</p>
                <p>{{ scope.row.endTime }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="票价/车厢座号/坐席类型" width="165">
            <template #default="scope">
              <div style="display: flex;  align-items: center" class="bb">
                <p class="pri"> {{"￥" + scope.row.price }}</p>
                <p>{{ scope.row.number }}</p>
                <p>{{ scope.row.sitType }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="165">
            <template #default="scope">
              <el-switch v-model="scope.row.status"> </el-switch>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useStore } from "@/store/index";
import { getTime } from "@/utils/time";
import {useRouter} from 'vue-router'
const router = useRouter()
const store = useStore();
const size = ref("default");
const value = ref("");
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");
const value4 = ref("");
const value5 = ref("");
const value6 = ref("");
const options = [
  {
    value: "高速动车",
    label: "高速动车",
  },
  {
    value: "特快",
    label: "特快",
  },
];
const options1 = [
  {
    value: "G41",
    label: "G41",
  },
  {
    value: "T33",
    label: "T33",
  },
];
const options2 = [
  {
    value: "北京西",
    label: "北京西",
  },
  {
    value: "昆明北",
    label: "昆明北",
  },
];
const options3 = [
  {
    value: "北京西",
    label: "北京西",
  },
  {
    value: "昆明北",
    label: "昆明北",
  },
];

const num1 = ref(1);
const num2 = ref(1);
const handleChange = (value) => {
  console.log(value);
};
onMounted(() => {
  store.getTicket();
});

// 改变时
const changeItem = (val) => {
    value.value = val;
};
const changeItem1 = (val) => {
  //   console.log(val);
  value1.value = val;
};

// 改变日期
const changeDate = (val) => {
  //   console.log(getTime(val));
  value2.value = getTime(val);
};
// 改变出发
const changeStart = (val) => {
  value3.value = val;
};
// 改变到达
const changeEnd = (val) => {
    console.log(val);
  value4.value = val;
};
const changeStartTime = (val) => {
    console.log(val);
    value5.value = val
}

const changeEndTime = (val) => {
    console.log(val);
    value6.value = val
}

// 提交
const submit = () => {
  store.submit({
    val:value.value,
    val1:value1.value,
    val2:value2.value,
    val3:value3.value,
    val4:value4.value,
    val5:value5.value,
    val6:value6.value,
  });
};

// 返回
const goback = () => {
    router.push("/index/ticket")
}
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
}
.box {
  width: calc(100% - 40px);
  height: 60px;
  display: flex;
  justify-content: space-between;
  background: white;
  align-items: center;
  padding: 0 20px;
}
.h3 {
  color: #1ba9ba;
}
.mes {
  width: 100%;
  height: calc(100% - 80px);
  margin-top: 15px;
  background: white;
}
.bac {
  padding-left: 20px;
  padding-top: 20px;
}
.el-select {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  line-height: 32px;
  width: 123px;
}

.mes1,
.mes2,
.mes3 {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
}

.tab {
  width: 100%;
  margin-top: 15px;
}

.detail {
  width: 100%;
}
.detail h3 {
  padding-left: 15px;
  padding-top: 20px;
  color: #1ba9ba;
}

.bb{
    display: flex;
    flex-direction: column;
    
}

.p{
    color: #1ba9ba;
}

.pri{
    color: orange;
}
</style>
